{% for key,page in pagination.items %}
    <div class="gdlr-core-item-list  gdlr-core-item-pdlr gdlr-core-item-mgb gdlr-core-column-20 {% if key % 3 == 0 %}gdlr-core-column-first{% endif %}">
        <div class="gdlr-core-blog-modern  gdlr-core-with-image gdlr-core-hover-overlay-content gdlr-core-opacity-on-hover gdlr-core-zoom-on-hover">
            <div class=gdlr-core-blog-modern-inner>
                <div class="gdlr-core-blog-thumbnail gdlr-core-media-image">
                    <img src="{{ asset(page.thumbnail) | imagine_filter('page_thumbnail_style_image') }}">
                </div>
                <div class="gdlr-core-blog-modern-content  gdlr-core-center-align" style="padding-bottom: 30px;">
                    <h3 class="gdlr-core-blog-title gdlr-core-skin-title" style="font-size: 18px ;font-weight: 700 ;letter-spacing: 0px ;">
                        <a href="{{ path('article_content', {id: page.id}) }}" >{{ page.title }}</a>
                    </h3>
                    <div class="gdlr-core-blog-info-wrapper gdlr-core-skin-divider">
                        <span class="gdlr-core-blog-info gdlr-core-blog-info-font gdlr-core-skin-caption gdlr-core-blog-info-author">
                            <img src='{% if page.avatar is not null %}{{ asset(page.avatar) | imagine_filter('page_thumbnail_avatar_image') }}{% else %}{{ asset('images/sf-positive.svg') }}{% endif %}'  class='avatar avatar-50 photo' height=50 width=50>
                            {% if page.nickname is not null %}{{ page.nickname }}{% else %}{{ page.username }}{% endif %}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endfor %}
<script>
    let total = {{ total }};
    let offset = {{ offset }};
    jQuery("#load-more-page").attr('offset', offset);
    if (total < 9) {
        jQuery("#load-more-page").html('已经到底啦');
        jQuery("#load-more-page").attr('end', 'on');
    }
</script>